<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myApp">
    <h3>v-route路由</h3>
    <nav>
        <p v-for="item in routers">
            <router-link :to="item.path">${ item.title }$</router-link>
        </p>
    </nav>
    <router-view></router-view>
    <script type="text/x-template" id="message">
        <div>aaaaaaaaaaaaa</div>
    </script>
    <script type="text/x-template" id="order">
        <div>bbbbbbbbbbbbbb</div>
    </script>
    <script type="text/x-template" id="money">
        <div>cccccccccccccc</div>
    </script>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>


<!-- <script src="{{ __TPL__ }}js/libs/vue/vue.min.2.1.8.js"></script> -->
<!-- <script src="{{ __TPL__ }}js/libs/vue/vue-router.js"></script> -->


<script type="text/javascript">
var message = Vue.component('message', {
    template: '#message',
    data(){
        return{
            title:'消息管理'
        }
    },
    methods:{
        check() { this.checked = !this.checked; }
    }
});/* order */
var order = Vue.component('order', {
    template: '#order',
    data(){
        return{
            title:'消息管理'
        }
    },
    methods:{
        check() { this.checked = !this.checked; }
    }
});
/* money */
var money = Vue.component('money', {
    template: '#money',
    data(){
        return{
            title:'消息管理'
        }
    },
    methods:{
        check() { this.checked = !this.checked; }
    }
});
/* 配置路由 */
var routes = [
    {path:'/message',component:message,title:'消息管理',active:true,icon:'icon-tixing'},
    {path:'/order',component:order,title:'订单管理',active:false,icon:'icon-dingdan2'},
    {path:'/money',component:money,title:'资金管理',active:false,icon:'icon-zhuanxiangzijin'},
];
// 创建路由实例
var router = new VueRouter({
    routes:routes
});
/**/
var account = new Vue({
    el: '#myApp',
    delimiters: ['${', '}$'],
    router,
    data:{
        routers:routes
    },
    methods: {

    }
})
</script>








// <script type="text/javascript">
// /* 模板 */
// var news = { template: '<p>这里是新闻中心</p>' };
// var product = { template: '<p>这里是产品页面</p>' };
// var about = { template: '<p>这里是关于我们</p>' };
// /* 配置路由 */
// var routes = [
//     {path:'/news',component:news},
//     {path:'/product',component:product},
//     {path:'/about',component:about},
// ];
// // 创建路由实例
// var router = new VueRouter({
//     routes:routes
// });
// var myApp = new Vue({
//     el:"#myApp",
//     router
// });
// </script>
</body>
</html>